<template>
<!--        定义导航-->
        <van-tabbar :placeholder="true" v-model="active">
          <van-tabbar-item icon="home-o" to="hello">首页</van-tabbar-item>
          <van-tabbar-item icon="goods-collect-o" to="vantcoms">收藏</van-tabbar-item>
          <van-tabbar-item icon="orders-o" to="order">订单</van-tabbar-item>
          <van-tabbar-item icon="contact" to="homePage" >我的</van-tabbar-item>
        </van-tabbar>
</template>
<script>
  import { Tabbar, TabbarItem } from 'vant';

  export default {
    name: "index",
    components: {
      [Tabbar.name]:Tabbar,
      [TabbarItem.name]:TabbarItem
    },
    data() {
      return {
        message: "点击就会改变值！",
        images: [
          require('@/assets/img/Carousel2.png'),
          require('@/assets/img/Carousel4.png'),
          require('@/assets/img/Carousel3.png')
        ],
        gongge: [
          require('@/assets/aili/biaoqing.png'),
          require('@/assets/aili/dunpai.png'),
          require('@/assets/aili/kapian-01.png'),
          require('@/assets/aili/paizhao.png'),
          // require('@/assets/aili/qiandao-01.png'),
          // require('@/assets/aili/songliwu-01.png'),
          // require('@/assets/aili/sousuofangjian-01.png'),
          // require('@/assets/aili/toutouzi-01.png')
        ],
        currIndex: 0,
        active: 0,
        tabbars: [
          {
            name: "hello",
            title: "首页",

          },
          {
            name: "vantcoms",
            title: "分类",

          },
          {
            name: "order",
            title: "消息",

          },
          {
            name: "homePage",
            title: "购物车",

          }
        ]

      }
    },
    mounted() {
      this.getCurrentLocation()
    },
    methods: {
      getCurrentLocation() {
        for (let i = 0; i < this.tabbars.length; i++) {

          if (this.$route.path == "/" + this.tabbars[i].name){
            this.active=i;
          }
        }
        // console.log(this.$route.path)
      },
    }
  }
</script>

<style scoped>

</style>
